<template lang="pug">
  div.index
    div.block
      child4(v-bind:items="items3")
        div(slot-scope="scope") {{scope.item.id}}
    div.block
      child3
        div(slot="slot1") 插槽 slot1 显示的内容
        div(slot="slot2") 插槽 slot2 显示的内容
    div.block
      child2
        ul
          li(v-for="item in items3" v-bind:key="item.id") {{item.id}}：{{item.name}}
    div.block
      child1(ref="child1_A" title="Child1_A" v-bind:items="items1" v-on:onItemClick="onChild1_AItemClick")
      div.line
      child1(ref="child1_B" title="Child1_B" v-bind:items="items2" v-on:onItemClick="onChild1_BItemClick")
      div
        button(v-on:click="onBtnChild1_AClick") 显示 Child1_A 的 DIV
        button(v-on:click="onBtnChild1_BClick") 显示 Child1_B 的 DIV
    div.block
      h1 计算属性
      div
        div 数字1：
          input(type="text" v-model='num1')
        div
          | 数字2：
          input(type="text" v-model='num2')
        div {{num1}}+{{num2}}={{num3}}
    div.block
      h1 事件
      div
        div.hidden-div(v-show="isVisble") 隐藏层
        button.btn(v-if="!isVisble" v-on:click="onBtnShowDiv") 显示隐藏层
        button.btn(v-on:click="onBtnShowDiv" v-else) 关闭隐藏层
    div.block
      h1 数据双向绑定
      div
        div
          span 请输入用户名:
          input(v-model='username' type='text')
        div 用户名是： {{username}}
</template>

<script type="text/ecmascript-6">
  import Child1 from './Child1'
  import Child2 from './Child2'
  import Child3 from './Child3'
  import Child4 from './Child4'

  export default {
    data() {
      return {
        username: '',
        isVisble: false,
        num1: 1,
        num2: 2,
        items1: [1, 2, 3, 4],
        items2: ['A', 'B', 'C', 'D'],
        items3: [
          {id: 1, name: 'Tom'},
          {id: 2, name: 'Jim'},
          {id: 3, name: 'Bill'},
          {id: 4, name: 'Mac'}
        ]
      }
    },
    methods: {
      onBtnShowDiv() {
        this.isVisble = !this.isVisble
      },
      onChild1_AItemClick(item) {
        console.log('Child 1 item:', item)
      },
      onChild1_BItemClick(item) {
        console.log('Child 2 item:', item)
      },
      onBtnChild1_AClick() {
        this.$refs.child1_A.toggleDiv()
      },
      onBtnChild1_BClick() {
        this.$refs.child1_B.toggleDiv()
      }
    },
    computed: {
      num3() {
        return this.num1 * 1 + this.num2 * 1
      }
    },
    // 监听
    watch: {
      num1(newValue, oldValue) {
        console.group('===== 监听 num1 =====》')
        console.log('新值:', newValue)
        console.log('旧值:', oldValue)
        console.groupEnd()
      }
    },
    components: {
      Child1,
      Child2,
      Child3,
      Child4
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
</style>
